<template>
	<orh-table>
		<DatePicker type="month" size="small" placeholder="请选择日期" style="width: 200px" slot="option" @on-change="searchfun"></DatePicker>
		<Table :columns="columns1" :loading="tableload" :data="datalist" slot="table"></Table>
	</orh-table>
</template>

<script>
	   export default {
	   	data() {
	   		return {
	   			tableload: false,
	   			datalist: [], //荣誉变量
	   			columns1: [],
	   			listUrl: 'api/teacher/v1/get/teacherGuard/userguards', //通过班级找荣誉
	   		}
	   	},
	   	methods: {

	   		/************************************************************
	   		 *
	   		 * 请求列表数据
	   		 *
	   		 ************************************************************/
	   		queryData() {
	   			this.tableload = true
	   			this.$http.get(this.listUrl).then(val => {
	   					if (val.data != null) {
	   						let arr = []
	   						val.data.datetime.forEach((item1, index1) => {
	   							arr.push({
	   								title: item1.time + '(' + item1.week + ')',
	   								width: 210,
	   								render: (h, params) => {
	   									let title = []
	   									params.row.datetime.forEach((item2, index2) => {
	   										if (item1.time == item2.time) {
	   											item2.entracededey.forEach((item3, index3) => {
	   												let bgcolor = '#f8f8f9'
	   												let color = item3.type == 1 ? 'green' : (item3.type == 2 ? 'red' : (item3.type == 4 ? 'red' : (item3.type == 6 ? '#007d7f' : '#000')))
	   												let colorfont = item3.type == 1 ? '正常' : (item3.type == 2 ? '迟到' : (item3.type == 4 ? '旷工' : (item3.type == 6 ? '请假' : '未到时间')))
	   												title.push(
	   													h('br'),
	   													h('div', {
	   														style: {
	   															backgroundColor: bgcolor,
	   														},
	   													}, '开始时间：' + item3.time_an),
	   													h('div', {
	   														style: {
	   															backgroundColor: bgcolor,
	   														},
	   													}, '结束时间：' + item3.time_en),
	   													h('div', {
	   														style: {
	   															backgroundColor: bgcolor,
	   															color: color
	   														},
	   													}, '状态：' + colorfont),
	   													h('br')
	   												)
	   											})
	   										}
	   									})
	   									return h('div', title)
	   								}
	   							})
	   						})

	   						arr.push({
	   							title: '总数',
	   							width: 150,
	   							fixed: 'right',
	   							align: 'center',
	   							render: (h, params) => {
	   								let title = []

	   								let absenteeismcount = 0
	   								let leavecount = 0
	   								let latecount = 0
	   								let normalcount = 0
	   								params.row.datetime.map(el => {
	   									el.entracededey.map(w => {
	   										switch (w.type) {
	   											case 1:
	   												return normalcount++
	   													break;
	   											case 2:
	   												return latecount++
	   													break;
	   											case 4:
	   												return absenteeismcount++
	   													break;
	   											case 6:
	   												return leavecount++
	   													break;
	   										}
	   									})
	   								})
	   								title.push(
	   									h('br'),
	   									h('div', {
	   										style: {
	   											color: 'green',
	   											fontSize: '13px'
	   										}
	   									}, '正常签到总数 : ' + normalcount),
	   									h('div', {
	   										style: {
	   											color: 'red',
	   											fontSize: '13px'
	   										}
	   									}, '迟到签到总数 : ' + latecount),
	   									h('div', {
	   										style: {
	   											color: '#007d7f',
	   											fontSize: '13px'
	   										}
	   									}, '请假签到总数 : ' + leavecount),
	   									h('div', {
	   										style: {
	   											color: 'red',
	   											fontSize: '13px'
	   										}
	   									}, '旷工签到总数 : ' + absenteeismcount),
	   									h('br')
	   								)
	   								return h('div', title)

	   							}

	   						})
	   						this.columns1 = arr
	   					}
	   					this.datalist = []
	   					this.datalist.push(val.data)
	   					this.tableload = false //加载完数据动画结束
	   				})
	   				.catch(err => {
	   					if (err.code && err.code == 422) {
	   						this.$Message.error(err.message);
	   					}
	   					this.tableload = false //加载完数据动画结束
	   				});

	   		},


	   		/************************************************************
	   		 *
	   		 * 关键字搜索
	   		 *
	   		 ************************************************************/
	   		searchfun(val) {
	   			this.listUrl = `api/teacher/v1/get/teacherGuard/userguards?month=${val}`, //通过班级找荣誉
	   				this.queryData()
	   		},

	   	},
	   	mounted() {
	   		this.queryData()
	   	}
	   }
</script>
